<template>
  <div id="app">
    <transition :name="transitionName">
      <!-- <keep-alive :exclude="exclude"> -->
        <navigation>
          <router-view class="page"></router-view>
        </navigation>
      <!-- </keep-alive> -->
    </transition>
  </div>
</template>




<script>
  export default{
  name:'app',
  data(){
    return{
      transitionName:''
    }
  },
  created () {
    console.log('初始化vue')
    // 导航跳转前进
    this.$navigation.on('forward', (to, from) => {
      // 页面切换动画
      this.transitionName = "slide-left"
    })
    // 导航后退
    this.$navigation.on('back', (to, from) => {
      // 页面切换动画
        this.transitionName = 'slide-right'
    })
    // 导航替换
    this.$navigation.on('replace', (to, from) => {
        this.transitionName = ''
    })
    // 导航刷新
    this.$navigation.on('refresh', (to, from) => {
        console.log('refresh to', to, 'from ', from)
      })
    // 导航重置
    this.$navigation.on('reset', () => {
        console.log('reset')
    })
  },
}
</script>


<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

/* .change-right-enter-active,
.change-right-leave-active,
.change-left-enter-active,
.change-left-leave-active {
  will-change: transform;
  transition: all 300ms;
  position: absolute;
  top:0;
  left:0;
  right: 0;
  bottom:0;
  width: 100%; 
  height: 100%;
}
.change-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.change-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.change-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.change-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
} */
.page {
  transition: all .5s cubic-bezier(.55, 0, .1, 1);
}
.slide-left-enter, .slide-right-leave-active {
  position: absolute;
  width: 100vw;
  opacity: 0;
  transform: translate(100%, 0);
}
.slide-left-leave-active, .slide-right-enter {
  position: absolute;
  width: 100vw;
  opacity: 0;
  transform: translate(-100%, 0);
}
</style>